<template>
  <el-dialog
    v-model="visible"
    title="学习记录详情"
    :close-on-click-modal="false"
    width="700px"
  >
    <el-descriptions
      v-if="dataForm"
      :column="2"
      border
    >
      <el-descriptions-item label="记录ID">
        {{ dataForm.id }}
      </el-descriptions-item>
      <el-descriptions-item label="用户ID">
        {{ dataForm.userId }}
      </el-descriptions-item>
      <el-descriptions-item label="课程ID">
        {{ dataForm.courseId }}
      </el-descriptions-item>
      <el-descriptions-item label="课时ID">
        {{ dataForm.lessonId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="学习进度(%)">
        <el-progress
          :percentage="dataForm.progress || 0"
          :color="getProgressColor(dataForm.progress)"
        />
      </el-descriptions-item>
      <el-descriptions-item label="完成状态">
        <el-tag
          v-if="dataForm.isCompleted === 1"
          type="success"
        >
          已完成
        </el-tag>
        <el-tag
          v-else
          type="info"
        >
          未完成
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="试看状态">
        <el-tag
          v-if="dataForm.isFreeView === 1"
          type="success"
        >
          是
        </el-tag>
        <el-tag
          v-else
          type="info"
        >
          否
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="视频位置(秒)">
        {{ dataForm.videoPosition || 0 }}
      </el-descriptions-item>
      <el-descriptions-item label="学习时长(分)">
        {{ dataForm.studyDuration || 0 }}
      </el-descriptions-item>
      <el-descriptions-item label="最后学习时间">
        {{ dataForm.lastStudyAt || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="完成时间">
        {{ dataForm.completedAt || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ dataForm.createdAt }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ dataForm.updatedAt }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const visible = ref(false)
const dataForm = ref(null)

const init = (id) => {
  visible.value = true
  getInfo(id)
}

const getInfo = (id) => {
  http({
    url: http.adornUrl(`/admin/userCourseProgress/info/${id}`),
    method: 'get'
  }).then(({ data }) => {
    dataForm.value = data
  })
}

const getProgressColor = (progress) => {
  if (progress >= 80) {
    return '#67C23A'
  } else if (progress >= 50) {
    return '#E6A23C'
  } else {
    return '#F56C6C'
  }
}

defineExpose({
  init
})

const emit = defineEmits(['close'])
</script>

